<template>
  <div>
    <headTop></headTop>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="入库审核" name="join"> 
            <div>
                            <joinstore></joinstore>

            </div>
        </el-tab-pane>
        <el-tab-pane label="出库审核" name="out"> </el-tab-pane>
        <el-tab-pane label="仓库列表" name="list">
          <el-button type="primary" @click="isAddShow = true"
            >添加仓库</el-button
          >

          <div class="store-content">
            <el-card
              class="store-item"
              v-for="(item, index) in stores"
              :key="index"
            >
              <el-popconfirm
                title="确定删除此仓库吗？"
                @confirm="handleConfirm(item)"
              >
                <el-button
                  style="float: right; margin: 0px 5px"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  slot="reference"
                ></el-button>
              </el-popconfirm>

              <el-button style="float: right; margin: 0px 5px" type="primary"
                >查看详情</el-button
              >

              <div class="store-title">
                <div class="store-title-line"></div>
                <h4>{{ item.name }}</h4>
              </div>
              <div class="store-list">
                <el-tag
                  v-for="(list, index) in item.tags.split(',')"
                  :key="index"
                  >{{ list }}</el-tag
                >
              </div>
              <div class="store-content-list">
                <p><span>位置</span>{{ item.location }}</p>
                <p><span>仓管员</span>{{ item.staffName }}</p>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog
      :title="isEdit ? '修改信息' : '添加仓库'"
      :visible.sync="isAddShow"
      width="30%"
      :before-close="closehandle"
    >
      <insert
        :dataForm="currentItem"
        ref="craftForm"
        v-on:insertSuccess="insertSuccess"
      ></insert>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closehandle">取 消</el-button>
        <el-button type="primary" @click="handleClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import headTop from "@/components/headTop";
import { getStoreList, deleteStore } from "@/api/getData";
import insert from "./insert.vue";
import joinstore from "./joinstore.vue";
export default {
  data() {
    return {
      isAddShow: false,
      stores: [],
      currentItem: {},
      isEdit: false,
      activeName: "join",
    };
  },
  components: {
    headTop,
    insert,
    joinstore
  },
  mounted() {
    this.getList();
  },
  methods: {
    closehandle() {
      this.isAddShow = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getList() {
      getStoreList().then((res) => {
        this.stores = res.data.list;
      });
    },
    insertSuccess() {
      this.currentItem = Object.assign({}, {});
      this.$refs["craftForm"].resetFields();
      this.isAddShow = false;
      this.getList();
    },
    handleClick() {
      this.isAddShow = false;
      if (this.isEdit) {
        this.$refs.craftForm.onUpdate();
      } else {
        this.$refs.craftForm.onInsert();
      }
    },
    handleConfirm(item) {
      this.removeStore(item.id);
    },
    async removeStore(data) {
      try {
        let params = {
          id: data,
        };
        console.log(params);
        const result = await deleteStore(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: "删除失败!",
        });
      }
    },
  },
};
</script>

<style lang="less">
@import "../../style/normal.less";
.store-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin: 10px;
}

.store-item {
  width: 45%;
  //   height: 300px;
  margin: 20px;
}

.store-title {
  display: flex;

  .store-title-line {
    margin-right: 10px;
    background-color: rgb(135, 136, 222);
    width: 4px;
    border-radius: 4px;
  }
}

.store-list {
  margin: 10px;

  .el-tag {
    margin: 0px 5px;
  }

  ul li {
    font-size: 14px;
    font-weight: bold;
    margin: 10px;
  }
}
.store-content-list {
  margin: 10px;
  display: flex;
  p {
    font-size: 13px;
    margin: 5px;
    span {
      background-color: rgb(135, 136, 222);
      color: #fff;
      padding: 2px 5px;
      margin-right: 5px;
    }
  }
}
</style>
